<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Props</title>
</head>
<body>
<div id="container">

</div>
</body>
</html>


<!--引入react核心库-->
<script type="text/javascript" src="../Js/react.development.js"></script>
<!--引入react-dom库,用于支持react操作dom-->
<script type="text/javascript" src="../Js/react-dom.development.js"></script>
<!--引入babel库,用于将jsx转成js-->
<script type="text/javascript" src="../Js/babel.min.js"></script>

<script type="text/babel">//此处一定要写text/babel，将jsx转成js
class Form extends React.Component{
    render(){
        const {name,age,sex}=this.props
        return <div>
            <ul>
                <li>{name}</li>
                <li>{age}</li>
                <li>{sex}</li>
            </ul>
        </div>
    }
}

ReactDOM.render(<Form name="张三" age="18" sex="男"/>,document.getElementById("container"))

</script>